<template>
    <el-container>
        <el-aside width="200px">
            <el-tree ref="columnTreeRef" :data="columnTreeList" :props="treeProps" node-key="id"
                :expand-on-click-node="false" :highlight-current="true" @node-click="handleColumnClick"></el-tree>
        </el-aside>
        <el-main>
            <KkGrid v-bind="gridBind" @selection-change="handleSelectionChange"
                @toolbarButtonClick="handleToolbarButtonClick" @toolbarToolClick="handleToolbarToolClick">
                <template #columnIdSlot="{ row }">
                    {{ columnIdNameDict[row.columnId] }}
                </template>
                <template #createdAtSlot="{ row }">
                    {{ parseTime(row.createdAt) }}
                </template>

                <template #topFlagSlot="{ row }">
                    <span v-if="row.topFlag">
                        <el-tag size="small" type="success">已置顶</el-tag>
                    </span>
                    <span v-else>
                        <el-tag size="small">未置顶</el-tag>
                    </span>
                </template>
                <template #statusSlot="{ row }">
                    <el-tag size="small" type="success">{{ row.status }}</el-tag>
                </template>
                <template #actionSlot="scope">
                    <el-button size="small" type="text" icon="Edit" style="padding: 1px;margin-left: 5px;"
                        @click="handleEdit(scope.row)">修改</el-button>
                    <el-button size="small" type="text" icon="Delete" style="padding: 1px;margin-left: 5px;"
                        @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </KkGrid>
        </el-main>
    </el-container>
</template>
<script setup lang="js">
import { ref, onMounted, watch } from 'vue';
import cmsContentApi from '@/api/cmsContentApi';
import cmsColumnApi from '@/api/cmsColumnApi';
import { useRouter } from 'vue-router';

const router = useRouter();

const loading = ref(false);

const contentList = ref([]);
const selectedContents = ref([]);
const handleSelectionChange = (val) => {
    selectedContents.value = val;
};
const parseTime = (time) => {
    const date = new Date(time);
    return date.toLocaleString();
};
const handleRefresh = () => {
    getListByColumnList();
};
const getListByColumnList = async () => {
    loading.value = true;
    const columnId = currentColumn.value.id;
    const columnIdList = [columnId];
    columnIdNameDict.value[columnId] = currentColumn.value.name;
    currentColumn.value.children?.forEach(child => {
        columnIdList.push(child.id);
        columnIdNameDict.value[child.id] = child.name;
    });
    const res = await cmsContentApi.list({ columnIdList: columnIdList });
    contentList.value = res.data;
    loading.value = false;
};

const gridBind = ref({
    loading: loading,
    size: 'small',
    data: contentList,
    columns: [
        { type: 'selection', width: 55 },
        { prop: 'title', label: '标题', showOverflowTooltip: true },
        { prop: 'createdBy', label: '发布人', width: 100, align: 'center' },
        {
            prop: 'createdAt', label: '发布时间', width: 150, align: 'center', showOverflowTooltip: true,
            slot: 'createdAtSlot'
        },
        {
            prop: 'columnId', label: '所属栏目', width: 150, align: 'center', showOverflowTooltip: true,
            slot: 'columnIdSlot',
        },
        { prop: 'author', label: '作者', width: 100, align: 'center' },
        {
            prop: 'topFlag', label: '置顶状态', width: 100, align: 'center',
            slot: 'topFlagSlot',
        },
        { prop: 'status', label: '状态', width: 100, align: 'center' },
        {
            label: '操作', width: 150, align: 'center', className: 'small-padding fixed-width',
            slot: 'actionSlot',
        },
    ],
    toolbarConfig: {
        visible: true,
        create: true,
        delete: true,
        refresh: true,
        custom: true,
        buttons: [],
        tools: [],
    },
});
const handleToolbarButtonClick = ({ code }) => {
    if (code === 'create') {
        handleAdd();
    } else if (code === 'delete') {
        selectedContents.value.forEach(async (item) => {
            await cmsContentApi.delete(item.id);
        });
        getListByColumnList();
    } else if (code === 'refresh') {
        handleRefresh();
    }
};
const handleToolbarToolClick = (code) => {
    console.log('Toolbar tool clicked:', code);
};
const handleAdd = () => {
    router.push({
        name: "CmsContentDetailEdit",
        params: {
            id: -1,
        },
        query: {
            columnId: currentColumn.value.id,
        },
    });
};
const handleEdit = (row) => {
    router.push({
        name: "CmsContentDetailEdit",
        params: {
            id: row.id,
        },
    });
};
const handleDelete = async (row) => {
    loading.value = true;
    await cmsContentApi.delete(row.id);
    getList();
    loading.value = false;
};


// 左侧栏目树
const columnTreeRef = ref(null);
const columnTreeList = ref([]);
const treeProps = {
    children: 'children',
    label: 'name',
    id: 'id',
};
const currentColumn = ref(null);
const columnIdNameDict = ref({});
const getColumnTree = async () => {
    const res = await cmsColumnApi.listTree();
    columnTreeList.value = res.data;
    if (columnTreeList.value.length > 0) {
        currentColumn.value = columnTreeList.value[0];
        columnTreeRef.value.setCurrentKey(currentColumn.value.id);
    }
};
const handleColumnClick = (data) => {
    currentColumn.value = data;
};

watch(() => currentColumn.value, () => {
    getListByColumnList();
});

onMounted(() => {
    getColumnTree().then();
});
</script>
<style lang="scss" scoped></style>